<template>
  <div class="action">
    <div class="place-order">
      <div class="left">
        <div class="shop-car">
          <img src="../assets/images/ada.jpg" v-if="dishNum!=0" @click="getDetails" />
          <img src="../assets/images/ada.jpg" v-else />
          <span class="info" v-if="dishNum!=0">{{dishNum}}</span>
        </div>
        <div class="total" v-if="dishNum!=0">共 ¥ {{paramSubmitDataNew.totalPrice}}</div>
        <div class="total" v-else>未选购菜肴</div>
      </div>
      <div class="right">
        <span class="yes-order" v-if="dishNum!=0" @click="submitYes">去下单</span>
        <span class="no-order" v-else @click="submitNo">去下单</span>
      </div>
    </div>
    <!-- 购物车详情开始 -->
    <van-popup
      safe-area-inset-bottom
      :get-container="getContainer"
      v-model="show"
      round
      position="bottom"
    >
      <div class="content">
        <div class="clear-order">
          <div class="left" @click="clearEmpty">清空</div>
          <div class="righ" @click="close">X</div>
        </div>
        <div class="subscribe">
          <span>预约时间 {{paramSubmitDataNew.dinnerDate}}</span>
          <span>{{paramSubmitDataNew.dinnerTypeName}} {{time}}</span>
        </div>
        <div class="items">
          <div class="item" v-for="(item,index) in paramSubmitDataNew.infos" :key="index">
            <div class="left">{{item.foodName}}</div>
            <div class="right">
              <span>¥ {{item.purePrice}}</span>
              <van-stepper
                disable-input
                v-model="item.foodNum"
                min="0"
                :name="item.foodId"
                @plus="plus(item.foodId,item.foodPrice)"
                @minus="minus(item.foodId,item.foodPrice)"
                @change="change"
              />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 详情结束 -->
  </div>
</template>
<script>
export default {
  name: "action",
  props: {
    paramSubmitData: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  data() {
    return {
      paramSubmitDataNew: {},
      dishNum: 0,
      show: false,
      time: "" //餐别起始时间
    };
  },
  watch: {
    paramSubmitData: {
      handler: function(val) {
        // 选择了几个餐
        let start = val.dinnerTimeStart;
        let startHour =
          parseInt(start / 60) >= 10
            ? parseInt(start / 60)
            : "0" + parseInt(start / 60);
        let startMin = start % 60 >= 10 ? start % 60 : "0" + (start % 60);
        let startTime = startHour + ":" + startMin;
        // 餐别结束时间
        let end = val.dinnerTimeEnd;
        let endHour =
          parseInt(end / 60) >= 10
            ? parseInt(end / 60)
            : "0" + parseInt(end / 60);
        let endMin = end % 60 >= 10 ? end % 60 : "0" + (end % 60);
        let endTime = endHour + ":" + endMin;
        this.time = startTime + "-" + endTime;
        // 计算纯价格（单价*数量）
        // 一共多少份
        let dishNum = 0;
        for (let i in val.infos) {
          val.infos[i].purePrice =
            val.infos[i].foodNum * (val.infos[i].foodPrice / 100);
          dishNum += val.infos[i].foodNum;
        }
        this.dishNum = dishNum;
        // 赋值给data中变量
        this.paramSubmitDataNew = val;
      },
      deep: true
    },
    // 深度监听，如果数量为0时，从选中数组中删除
    // "paramSubmitDataNew.infos": {
    //   handler: function(val) {
    //     for (let i in val) {
    //       if (val[i].foodNum == 0) {
    //         val.splice(i, 1);
    //         // console.log(val[i])
    //       }
    //     }
    //   },
    //   deep: true
    // },
    dishNum: {
      handler: function(val) {
        if (val == 0) {
          this.show = false;
        }
      }
    }
  },
  created() {},
  methods: {
    // 查看详情
    getDetails() {
      let that = this;
      that.show = true;
    },
    // 关闭弹窗
    close() {
      this.show = false;
    },
    getContainer() {
      return document.querySelector(".action");
    },
    // 加
    plus(foodId, foodPrice) {
      let that = this;
      that.paramSubmitDataNew.totalPrice += foodPrice / 100;
      this.$emit("handled-data", that.paramSubmitDataNew);
    },
    minus(foodId, foodPrice) {
      let that = this;
      that.paramSubmitDataNew.totalPrice -= foodPrice / 100;
      for (let i in that.paramSubmitDataNew.infos) {
        if (that.paramSubmitDataNew.infos[i].foodId == foodId) {
          that.paramSubmitDataNew.infos[i].foodNum -= 1;
        }
      }
      this.$emit("handled-data", that.paramSubmitDataNew);
    },
    // 购物车菜肴为0时从购物车中删除
    change(val, detail) {
      let that = this;
      for (let i in that.paramSubmitDataNew.infos) {
        if (val == 0) {
          if (that.paramSubmitDataNew.infos[i].foodId == detail.name) {
            that.paramSubmitDataNew.infos.splice(i, 1);
          }
        }
      }
    },
    // 清空购物车
    clearEmpty() {
      let that = this;
      for (let i in that.paramSubmitDataNew.infos) {
        that.paramSubmitDataNew.infos[i].foodNum = 0;
      }
      // 总价重置为0
      that.paramSubmitDataNew.totalPrice = 0;
      this.$emit("handled-data", that.paramSubmitDataNew);
    },
    // 没选菜肴点击去下单
    submitNo() {
      let that = this;
      that.$toast("请选择菜肴");
    },
    // 已选菜肴点击去下单
    submitYes() {
      let that = this;
      console.log("保存本地数据", that.paramSubmitDataNew);
    }
  }
};
</script>
<style scoped>
.place-order {
  position: fixed;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 250px;
  background-color: #a5a4a5;
  display: flex;
  justify-content: space-between;
  z-index: 99999;
}
.place-order .left {
  width: 75%;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.place-order .left .shop-car {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin-top: -100px;
  position: relative;
}
.place-order .left .shop-car .info {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: red;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  top: -20px;
  right: 0px;
}
.place-order .left .shop-car img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.place-order .left .total {
  color: #fff;
  margin-left: 30px;
}
.place-order .right {
  width: 25%;
}
.place-order .right .yes-order {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 250px;
  color: #fff;
  background-color: #008fff;
}
.place-order .right .no-order {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 250px;
  color: #fff;
  background-color: #c2c2c2;
}
/* 模态窗 */
.content {
  margin-bottom: 350px;
  padding: 60px 60px;
  box-sizing: border-box;
}
.content .clear-order {
  display: flex;
  justify-content: space-between;
}
.content .clear-order .left {
  color: #0f96ff;
  font-size: 32px;
}
.content .subscribe {
  padding-bottom: 20px;
  color: #0f96ff;
  margin-top: 70px;
  border-bottom: 1px solid #cdcdcd;
}
.content .subscribe span {
  margin-right: 100px;
}
.content .items {
  width: 100%;
}
.content .items .item {
  padding: 30px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .items .item .right {
  display: flex;
  align-items: center;
}
.content .items .item .right span {
  margin-right: 30px;
}
</style>